{% block sw_media_add_thumbnail_form %}
<div class="sw-media-add-thumbnail-form">

    {% block sw_media_add_thumbnail_form_form_container %}
    <div class="sw-media-add-thumbnail-form__form-container">
        {% block sw_media_add_thumbnail_form_width %}
        <mt-number-field
            v-model="width"
            class="sw-media-add-thumbnail-form__input-width"
            :label="$tc('global.sw-media-add-thumbnail-form.labelMaximumSize')"
            :min="1"
            :step="1"
            :validation="width > 0"
            @input-change="widthInputChanged"
        />
        {% endblock %}

        {% block sw_media_add_thumbnail_form_lock_button %}
        <button
            class="sw-media-add-thumbnail-form__lock"
            :class="lockedButtonClass"
            @click="onLockSwitch"
        >
            <mt-icon
                :name="isLocked ? 'regular-lock' : 'regular-lock-open'"
                size="16px"
            />
        </button>
        {% endblock %}

        {% block sw_media_add_thumbnail_form_height %}
        <mt-number-field
            v-model="height"
            class="sw-media-add-thumbnail-form__input-height"
            :min="1"
            :validation="height > 0"
            :step="1"
            :disabled="isLocked"
            @input-change="heightInputChanged"
        />
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_add_thumbnail_add_button %}
    <mt-button
        class="sw-media-folder-settings__add-thumbnail-size-action"
        ghost
        :disabled="disabled || width === null || height === null || width === 0 || height === 0"
        variant="secondary"
        @click="onAdd"
    >
        {{ $tc('global.default.add') }}
    </mt-button>
    {% endblock %}
</div>
{% endblock %}
